//这是main.js是我们项目的js入口文件
//1,导入jquery
//import *** from ***,是es6中导入模块的方式
import $ from 'jquery'
//使用import语法导入css样式表
import './css/index.css'
//注意；webpack默认只能打包处理js类型的文件，无法处理其他的非js类型的文件
//如果是非js文件，我们需要安装一些合适的第三方loader加载器
//步骤：1，如果想要打包处理css文件，需要安装cnpm i style-loader css-loader -D
//2,打开webpack.config.js这个配置文件，在里面新增一个配置节点，叫做module，他是一个对象
//在这个module对象身上，有个rules属性，这个rules属性是个数组，在这个数组中存放了所有第三方文件的匹配和处理规则
//注意：webpack处理第三方文件类型的过程：
//1，发现这个要处理的文件不是js文件，然后去配置文件中查找有没有对应的第三方loader规则
//2，如果能找到对应的规则就会调用对应的loader处理这种文件类型。在调用的时候是从右到左调用的
//3，当最后一个loader调用完毕，会把处理的结果直接交给webpack进行打包并合，最终输出到bundle.js中去
import './css/index.less'
import './css/index.scss'
$(function(){
    $('li:odd').css('backgroundColor','green')//odd奇数行
/*     $('li:even').css('backgroundColor','lightblue')//even偶数行 */
$('li:even').css('backgroundColor',function(){
return'#'+'D97634'
})
})
//经过演示，webpack可以做什么事情？
//1，webpack能够处理js文件的相互依赖关系（什么叫相互依赖关系）：如果a.js文件需要b.js文件的函数或者对象，则是a以来b
//2，webpack能够处理js的兼容问题，(什么是兼容问题？)把高级的，浏览器不能识别的语法转为低级的，浏览器能够正常识别的语法
//3，webpack的命令格式：webpack 要打包的文件的路径 打包好的输出文件的路径